<script setup lang="ts">
import { getRechargeOrderListApi } from '@/api/recharge'
import { onShowRefreshData } from '@/utils/common'
import type { rechargeOrderListItem } from '@/types/member'
import { ref } from 'vue'

// eslint-disable-next-line no-undef
const paging = ref<ZPagingInstance>()
const dataList = ref<rechargeOrderListItem[]>([])
const queryList = (page: number, page_size: number) => {
  getRechargeOrderListApi({
    page,
    page_size,
  }).then((res) => {
    paging.value?.complete(res.result.data)
  })
}

const getRechargeDesc = (item: rechargeOrderListItem) => {
  let str = ''
  if (parseFloat(item.gift_money) > 0) {
    str += `Recharge $${item.money}, $bonus ${item.gift_money}`
  } else {
    str += `Recharge $${item.money}`
  }
  if (item.pay_status == 1) {
    str += '(Processing)'
  } else if (item.pay_status == 2) {
    str += '(Completed)'
  }

  return str
}

onShowRefreshData(() => {
  paging.value?.refresh()
})
</script>
<template>
  <shop-paginate-list ref="paging" v-model="dataList" @query="queryList">
    <uni-list class="list">
      <uni-list-item
        v-for="(item, index) in dataList"
        :key="index"
        class="item"
        :title="item.order_no"
        :note="getRechargeDesc(item)"
      >
        <template #footer>
          <view class="right">
            <text class="time">{{ item.create_time }}</text>
            <text class="money"> +{{ item.actual_money }} yuan </text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </shop-paginate-list>
</template>
<style lang="scss" scoped>
.item {
  line-height: 1.5em;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.time {
  font-size: 24rpx;
}

.money {
  color: red;
}
</style>
